<template>
  <div class="competition-page">
    <div class="competition-page-bg"></div>
    <div class="competition-container">
      <header class="mega_score_header">
        <div class="mega_topNav">
          <i
            class="iconfont icon-guanbi mega_topNavCloseBtn"
            @click="closeClickHandler()"
          ></i>

          <span class="mega_topNavTitle">技能大赛</span>
        </div>

        <div class="mega_tab-wrapper">
          <div class="mega_tabs">
            <div
              class="mega_tab"
              :class="{ active: currentType === 'student' }"
              @click="currentType = 'student'"
            >
              参赛学生
            </div>

            <div
              class="mega_tab"
              :class="{ active: currentType === 'teacher' }"
              @click="currentType = 'teacher'"
            >
              参赛老师
            </div>
          </div>

          <div class="mega_tabs">
            <div
              class="mega_tab"
              :class="{ active: currentStage === 'select' }"
              @click="currentStage = 'select'"
            >
              选拔赛
            </div>
            <div
              class="mega_tab"
              :class="{ active: currentStage === 'final' }"
              @click="currentStage = 'final'"
            >
              决赛
            </div>
          </div>
        </div>

        <!-- 搜索框 -->
        <div class="search-box">
          <input type="text" placeholder="搜索参赛人/组织" v-model="search" />
        </div>

        <!-- 表头说明 -->
        <div class="mega_tags-container">
          <div
            class="mega_tag-item mega_dropdown-tag"
            @click="orgClickHandler()"
          >
            组织/学校
          </div>
          <div
            class="mega_tag-item mega_dropdown-tag"
            @click="majorClickHandler"
          >
            赛项专业
          </div>
          <van-popup v-model:show="state.majorShow" position="bottom">
            <van-cascader
              v-model="state.form.major"
              title="请选择专业"
              :options="state.majorOptions"
              @close="state.majorShow = false"
              @change="majorChange"
              @finish="majorFinish"
            />
          </van-popup>
          <div class="mega_tag-item">理论满分:27</div>
          <div class="mega_tag-item">技能满分:8</div>
        </div>
      </header>

      <!-- 表格 -->
      <rankTable></rankTable>

      <drawLotsSuccessDialog ref="dialogRef" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import rankTable from "./updateScore/rankTable.vue";
import { reactive, toRefs } from "vue";
import drawLotsSuccessDialog from "./drawLots/drawLotsSuccessDialog.vue";
import { showDialog } from "vant";
const currentType = ref("student");
const currentStage = ref("select");
const search = ref("");
const dialogRef = ref(null);

const state = reactive({
  majorShow: false, // 控制弹出层显示
  form: {
    major: "", // 级联选择的值
  },
  majorOptions: [
    // 专业选项数据
    {
      text: "计算机类",
      value: "computer",
      children: [
        { text: "软件工程", value: "software" },
        { text: "网络安全", value: "security" },
      ],
    },
    {
      text: "经济管理类",
      value: "economics",
      children: [
        { text: "市场营销", value: "marketing" },
        { text: "财务管理", value: "finance" },
      ],
    },
  ],
});

const orgClickHandler = () => {
  console.log("我在点击组织学校");
  dialogRef.value.open(88); // 传编号
  // showDialog({
  //   title: "抽签成功!",
  //   message: "您的参赛编号是：\n\n88号",
  //   confirmButtonText: "知道了",
  // }).then(() => {
  //   // 用户点击确认后的逻辑
  // });
};

const majorClickHandler = () => {
  console.log("我在点击专业");
  state.majorShow = true;
};

const closeClickHandler = () => {
  console.log("关闭按钮点击");
};
</script>
<style scoped>
@import url("@/assets/scss/megaGame.scss");
</style>
